<template>
	<div class="row" id="MSidebar">
		<div class="col-sm-12">
			<!-- 用户信息 -->
			<div class="row" id="info">
				<div class="col-sm-6">
					<img src="../img/fav.png" class="img-responsive img-thumbnail" />
				</div>
				<div class="col-sm-6">
					<p>{{host.name}}</p>
					<p>{{host.description}}</p>
				</div>
			</div>
			<!-- 功能图标 -->
			<div class="row" style="height: 100%">
				<div class="col-sm-12 col-xs-12 sidebar">
					<ul class="nav nav-sidebar">
						<!--<li><router-link to="/" class=""><span class="glyphicon glyphicon-user" aria-hidden="true"></span><span class="pull-right">主页</span></router-link></li>-->
						<li v-if="plock"><router-link to="/chat" class=""><span class="glyphicon glyphicon-comment" aria-hidden="true"></span><span class="pull-right">聊天室</span></router-link></li>
						<li v-if="plock"><a data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-th" aria-hidden="true"></span><span class="pull-right">体验</span></a></li>
						
						<!--<li v-if="!plock"><router-link to="/123" class="" data-dismiss="modal"><span class="glyphicon glyphicon-user" aria-hidden="true"></span><span class="pull-right">聊天</span></router-link></li>-->
						<li v-if="!plock"><router-link to="/AudioChat" class="" data-dismiss="modal"><span class="glyphicon glyphicon-headphones" aria-hidden="true"></span><span class="pull-right">音频通信</span></router-link></li>
						<li v-if="!plock"><router-link to="/VideoChat" class="" data-dismiss="modal"><span class="glyphicon glyphicon-facetime-video" aria-hidden="true"></span><span class="pull-right">视频通信</span></router-link></li>
					
					</ul>
					<ul class="nav nav-sidebar footer">
						<li v-if="!plock"><router-link to="/login" class=""><span class="glyphicon glyphicon-cog" aria-hidden="true"></span><span class="pull-right">登录</span></router-link></li>
						<li v-if="plock" @click="logout"><router-link to="" class=""><span class="glyphicon glyphicon-cog" aria-hidden="true"></span><span class="pull-right">注销</span></router-link></li>
					</ul>
					<p>网络状态-{{net}}</p>
<!--
					<ul class="nav nav-sidebar">
						<li>网络状态<span class="">{{net}}</span></li>
					</ul>-->
				</div>
			</div>
		</div>
		<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4>请选择体验功能</h4>
					</div>
					<div class="modal-body">
						<ul class="nav" id="collapseIcon">
							<!--<li><router-link to="/123" class="" data-dismiss="modal"><span class="glyphicon glyphicon-user" aria-hidden="true"></span><span class="pull-right">聊天</span></router-link></li>-->
							<li><router-link to="/AudioChat" class="" data-dismiss="modal"><span class="glyphicon glyphicon-headphones" aria-hidden="true"></span><span class="pull-right">音频通信</span></router-link></li>
							<li><router-link to="/VideoChat" class="" data-dismiss="modal"><span class="glyphicon glyphicon-facetime-video" aria-hidden="true"></span><span class="pull-right">视频通信</span></router-link></li>
						</ul>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
    import { Message } from 'element-ui';
    export default {
        // name: 'MSidebar',
		props:['plock','net','WebRTC','host'],
		data:function(){
			return {};
		},
		computed:{
			targetUrl:function(){
				if(this.plock){
					return '/chat';
				}
				return '/login';
			}
		},
		methods:{
			logout(){
				let self = this;
				$.ajax({
					type:'post',
					url:domain+"/user/logout",
					dataType:'json',
					xhrFields:{
						withCredentials:true
					},
					success:function(e){
						if("success" == e.code){
							Message.success("注销用户成功，页面跳转");
							self.$parent.host = {
								name:'游客'
							}
							self.$parent.permision_lock = false;
							self.$parent.rtc.reinit();
							setTimeout(function(){
								self.$router.push('/');
								Message.closeAll();
							},2000);
						}else{
							Message({
								message:'系统繁忙，请稍后再试',
								type:'error'
							});
						}
					}
				});
			}
		}
    }
</script>

<style scoped>
/*div {
	height:100%;
}*/
#MSidebar{
	background: #f5f5f5;
	height: 100%;
}

#info{
	margin-top: 30px;
	height: 100px;
}

#fundation{
	margin-top:50px;
}

.sitem{
	border:none;
}

.sidebar{
	/*position: fixed;*/
    /*top: 151px;*/
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
}

.nav-sidebar{
	margin-right: -21px;
    margin-bottom: 20px;
    margin-left: -20px;
	font-size: 18px;
}

.fundation-title{
	margin-left: 30px;
}

.footer{
	margin-top:80px;
}
</style>